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Abstract. The objective of this innovative experimental project is to con- 
tribute towards improving the dissemination of preventive information 
among the population by means of cartography. This is based on the as- 
sumption that map interactivity can facilitate the uptake of information on 
risks among the general public. In 2011, the City of Saint-Etienne, the I nsti- 
tutefor M ajor Risks (I RM a) and the I STH M E research centre developed an 
online DICRIM (document aimed at the local residents describing the ma- 
jor risks to which they are exposed) comprising several interactive maps. As 
part of theCEMORAL project (2011- 13), three new interactive cartographic 
applications for Saint-Etienne were tested. The first two applications pre- 
sent information on flood risks, with a level of detail that varies according 
to the spatial scale of the map. The difference between the two lies in the 
interactive options, which are developed to different extents. The third ap- 
plication shows past events (floods, landslides) by means of a timeline. All 
three applications come with explanations that state their purpose and help 
users become f ami I i ari zed more qui ckl y. 

Keywords: Interactive maps, Web mapping, Preventive information, 
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1. Introduction 

The policy on risk prevention in France comprises several measures for re- 
ducing the i mpact that a particular phenomenon (eg. flooding) is likely to 
have on elements at risk (eg. property, people, the environment). Among 
these measures is that of preventive information, which entitles citizens to 



"information about the major risks 1 to which they are exposed in certain 
areas of the country and the associated safeguard measures" (Legifrance 
2004). The aim is to make citizens aware of the risks to which they are ex- 
posed so that they may take charge of thei r own safety and that of the per- 
sons around them. Bei ng i nformed about phenomena, their impact and the 
associated protective measures makes people less vulnerable and more able 
to cope when faced with an unusual phenomenon. 

There are several ways of disseminating such information at the level of the 
commune, one of which is the Document d'l nformation Communal sur les 
Risques Majeurs (DICRIM) (Legifrance 2007). It is structured into several 
sections that describe the major risks in the commune, a list of past events, 
the measures taken by the local authorities to deal with them, including 
examples of past actions, the safeguard measures to be followed in the 
event of danger or an al ert, as wel I as the safety communi cati ons strategy. 

When it comes to improving the readability and comprehensibility of risk 
data among the population (Ministere de I'Ecologie et du Developpement 
Durable 2006), cartography plays a significant role: first, it allows readers 
to locate information and situate themselves with respect to this informati- 
on; second, it makes it easier to analyse the spatial relations between data 
that would otherwise be difficult to identify; finally, being a visual image, it 
is very appealing. In addition, we believe that interactivity can reinforce the 
uptake of information, provided that it is simple to use. The principle of in- 
teractivity is to "give users the possibility of carrying out actions within a 
map. It also has the purpose of providing additional information (dis- 
playing hidden nomenclature, zoom function for an area with change in ob- 
servation level)" (GCART 2004-07). 

In 2011, the City of Saint-Etienne, the Institute for Major Risks (IRMa) and 
thelSTHME research centre of UniversiteJ ean Monnet collaborated on the 
implementation of an online DICRIM comprising several interactive maps 2 . 
As part of the CEMORAL research project 3 (2011- 2013), a few other maps 
have been proposed (Lieghio2012). 



1 A major risk corresponds to a phenomenon whose probabi I ity of occurrence is low, 
but whose consequences for people, property and the envi ronment are damagi ng. 

2 This project was carried out with the financial support of the City of Saint-Etienne, 
the Rhone-Alpes region and the Rhone-Alpes Regional Directorate for the Environment, 
Development and Housing (DREAL). 

3 The CEMORAL project is funded by the Loire Public Establishment (EP Loire) and 
the European Regional Development Fund (FEDER) as part of the "Plan Loire Grandeur 
Nature". 



In the foil owing sections, we will present the interactiveDICRIM of the City 
of Sai nt-Eti enne. We wi 1 1 then descri be the three new map appl i cati ons that 
have been developed. Finally, we will conclude with several other avenues 
worth expl ori ng i n future i nvesti gati ons. 



2. Interactive DICRIM of the City of Saint-Etienne 

2.1. Context 

Although a paper version of the City of Sai nt-Eti en ne's DICRIM has been 
available online for some time now, the City has noticed that it is rarely 
viewed because users are not aware of its availabi lity. 

Therefore, in a bid to improve the communication of information via the 
Dl CRI M while taking into account the prerogatives of the Flood Directive, 
which cites the use of innovative methods based on I nformation and Com- 
munications Technology for informing the population about risks (Europe- 
an Union 2007), the City of Saint-Etienne, the I RM a and thelSTHME la- 
boratory proposed making the Dl CRI M more interactive and easily accessi- 
ble online. 

2.2. Methodological choices 

Two interactive map applications have been proposed: one application pro- 
vides information on flood risks and depicts the flood- prone areas in the 
commune as well as the associated preventive measures (protective struc- 
tures, information communications strategy), while the other is a geohisto- 
rical application that shows geolocated points for which there are archived 
documents on past events (floods, landslides) that occurred in the commu- 
ne. These data are accompanied by additional information that is conveyed 
through pop-ups and multimedia objects (text, pictures, videos). Further- 
more, the maps are supplemented by base maps (city maps, photographs, 
cadastral maps) that help users to find their bearings in the geographical 
space. 

In both of these applications, users may select the information that they 
wish to see, move around or change the spatial scale of the map. They may 
also pinpoint their location by address. In thegeohistorical application, it is 
even possi bl e for users to search for events by type or date. These i nteracti - 
ve options are accessible via navigation tools, query tools and a clickable 
legend, which are arranged around the map. 

These two applications may be accessed through webpages containing the 
explanatory text on the DICRIM. For example, the flood risk application is 
opened by clicking on a hyperlink located on the webpage about this risk. 



2.3. Results 

The map applications have been implemented in an architecture compri- 
sing a GeoServer map server, an Oracle database server and an Apache 
TomCat web server. Two J avaScript libraries have been added: OpenLayers 
for the map display and J Query for enhancing thej avaScript language pos- 
sibilities. 

The interactive DICRIM has been available on the City's official website 
since May 2012 (Ville Saint-Etienne 2012). A set of recommendations has 
also been written in collaboration with the IRMa and serves as a guide for 
other communes which may wish to develop similar applications (Clement 
etal.2012). 

Following this work and as part of the CE MORAL project, three other inter- 
active map solutions have been developed. They revolve around several ob- 
jectives based on proposals that have yet to be implemented - proposals 
formulated from the experience with the 2011 project and the very first 
feedback about the City's interactive DICRIM. These objectives will be 
described in the next section. 



3. Aims of future applications 

3.1. Improve the graphics density and the visual hierarchy of 
map reading 

In the map applications of the interactive DICRIM of the City of Saint- 
Etienne, information on flood risks and past events may be displayed on 
any spatial scale. However, the map can be hard to read, especially on the 
smallest scales, when there is too much juxtaposed or superimposed data. 
Additionally, by default, all data is displayed once the applications are ope- 
ned, which may make it difficult for users to prioritize them and determine 
theintended meani ng of the map. Similarly, the base maps (city maps, pho- 
tographs, cadastral maps) are available on all scales even though they may 
not al ways be rel evant, for exampl e the smal I -seal e cadastral map. 

We propose that the display of certain data be restricted to certain scales. 
For example, in theflood risk application, information is presented at diffe- 
rent I evel s of detai I and the base maps vary accordi ng to spati al seal e. I n the 
case of thegeohistorical application, the map is accompanied by a timeline 
so that only events that occurred on the same period are displayed. 



3.2. Facilitate the finding of bearings in the map 

In the applications of the City's interactive DICRIM, users may locate 
themselves based on an address by means of a query function. Alterna- 
tively, they may zoom in or out and move around within the map itself. 
However, it seems that users someti mes fi nd it hard to determine their bea- 
ri ngs, especi al I y at very smal I or very I arge seal es. 

In order to minimize these inconveniences, four possible solutions have be- 
en considered. The first of these is to develop three buttons that will auto- 
matically position the map according to three predefined spatial scale ran- 
ges (city, district, region around the city). The next solution is to create ac- 
tions (click, hover) for various objects that will make it easier for users to 
locate themselves (districts, landmark buildings in the city) thanks to pop- 
ups that display their names. Another solution is to add an overview map. 
Finally, it is proposed to reduce or even remove certai n navigation options 
i n the map, such as the possi bi I ity of movi ng around or zoomi ng i n and out. 

3.3. Facilitate the understanding and use of applications 

Currently, there are not many explanations provided as to the purpose of 
the map applications of the City's interactive DICRI M, or how to go about 
using them. This makes it harder for users to decipher the message behind 
the map and use the applications. Besides, the tools that allow users to in- 
teract with the map (navigation, query, actions on objects, clickable legend) 
may be missed or poorly understood, notably because of their location on 
the page or their design. For example, the clickable legend in the drop- 
down menus at the top of the map i s not cl earl y vi si ble. 

In order to help users better understand and use each application, we 
propose to add several new features. First, the webpagefrom which users 
access the application gives a summary of its objectives. Next, once users 
click on the hyperlink that opens the application, a pop-up window indica- 
tes the data that will be shown. It also states that an explanatory note can 
be accessed at all times simply by clicking on a button in the application. 
This note shows a map- reading scenario whose aim is to guide users in gat- 
hering i nf ormati on as they expl ore the map. 

Once the application is opened, a set of contextual items accompanies each 
map, comprising a legend, a title, a graphics scale, an orientation, the origin 
of the displayed data and the creators of the application. In addition, the 
location and design of the interactive tools on the page are to be modified 
for greater ease of use. M ost notably, there is a need for a I egend that comes 
on display without having to look for it; this legend should also be located 
beside the map. Finally, a user guide is available at all times within theap- 
pl i cati on to provi de i nf ormati on on how each tool works. 



Table lshowsthefunctionalities developed in thethree map applications. 



Functionnality 



Clickable 
map 



Interactive 
map 



Temporal 
interactive 
map 



Improve the graphics density and the visu al hierarchy of ma p readinc 

1. Data restricted to certain spatial scales 

2. Data restricted to certain temporal scales 

3. Base maps restricted to certain spatial scales 

Facilitate the finding of bearings in the mar 

4. Predefined buttons 

5. Actions (click, hover) for certain objects 

6. Overview map 

7. Reduced navigation options in the map 



Facilitate the understanding and use of applications 



8. Explanations about the purpose of the applications 

9. Pop-up window to present data 

10. Explanatory note about the map-reading scenario 

11. Contextual items 

12. Location of interactive tools 

13. Design of interactive tools 

14. User guide of interactive tools 




Table L Functionalities of thethree applications (© Chesneau 2013). 

In the next section, we will describe these applications according to the first 
seven f uncti onal iti es. 



4. Application characteristics 

The first two applications display flood risk data at a level of detail that 
changes according to the map scale. While the interactive options in the 
first application (clickable map) are relatively limited, those in the second 
application (interactive map) are more advanced. The third application in- 
volves the mappi ng of past events (temporal i nteracti ve map). 

4.1. Clickable map 

AAA. Conceptuel characteristics 

To begin with, a city- scale map depicting the districts is shown (Figure 1). 
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Figure L Map at the scale of the city (Lieghio 2012, © City of Saint-Etienne, 
ISTHME, IGN France). 

When users hover over a district, a pop- up appears to indicate that users 
may, if they wish, view a map on the scale of this district. Additional infor- 
mation is then presented: flood- prone areas and strategic elements for 
managing an event (establishments open to the public, roads) according to 
distance from the flood- prone areas. The name of each element is obtained 
by hoveri ng the mouse poi nter over the obj ect. Users may return to the map 
of the city at all times at the click of a button (Figure 2). 
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Figure 2. Map at the scale of the district (Lieghio 2012, © City of Saint-Etienne, 
ISTHME, IGN France). 

District maps are available in both static and animated versions. I n the sta- 
tic version, thefinal map with which users may interact is shown at once. I n 
the animated version, the initial map is only made up of a base map. An 
animation is started by clicking a button located beside the map. Data on 
flood- prone areas and elements at risk start to appear on the map. The pur- 
pose of this animation is to impose a certain map-reading order. 

I n this proposal, users may not navigate freely from one map to another at 
different spatial scales. Only clicking actions (on a district when in a city- 
scale map, or on a button when in a district- scale map) are possible. 
Furthermore, the number of interactive options is dependent on the spatial 
scale. For example, at the district scale, only the names of elements at risk 
may be di spl ayeol by a hover acti on . 

4.1 .2. Technical characteristics 

TheJ avaScript Raphael library has been chosen for building this applicati- 
on. The maps are first generated in SVG language with an SIG software, 
then developed in J avaScript language implementing the SVG language to 
incorporate interactive and animation functionalities. 



4.2. Interactive map 



4.2.1. Conceptuel characteristics 

Three reference spatial scaleranges are def i ned, for which risk information 
i s di spl ayed at di fferent I evel s of detai I . 

At first, there is a city-scale map highlighting the flood- prone areas and the 
number of preventive actions taken in each district (Figure 3). 
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Figure 3. Map at the scale of the city (Lieghio 2012, © City of Saint-Etienne, 
ISTHME, IGN France, Cloudmade). 

Next, from a drop-down list, users may select a district on which they wish 
to zoom in. Additional information is then represented on the district map 
such as the water levels attained in flood- prone areas or the preventive ac- 
tions according to type (protection, information), each of which is accom- 
panied by an explanatory pop-up and a multimedia object (text, pictures, 
videos) (Figure 4). 




Figure 4. Map at the scale of the district (Lieghio 2012, © City of Saint- Etienne, 
ISTHME, IGN France, Cloudmade). 

At all times, users may return to the city-scalemap at the click of abutton. 

A map depicting the city in its geographical surroundings (hills, waterways, 
dams, roads, communes) can also be displayed. The purpose of this particu- 
lar map is to help users find their bearings and better understand the origin 
of the flood risk (Figure 5). 
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Figure 5. Map at the scale of the surrounding region (Lieghio 2012, © City of 
Saint- Etienne, ISTHME, IGN France, Cloudmade). 



Once again, in order to make it easier for users to find their bearings in the 
maps, base maps are provided to complement risk data. These maps show 



varying levels of detail according to the spatial scale at which they are dis- 
played. Furthermore, several base maps are available at a given scale. For 
example, at the scale of a district, users may choose a standard base map 
with roads, buildings, waterways and green spaces or an aerial photograph. 
Additional information such as landmark sites in the district (city hall, uni- 
versi ti es, squares) may be di spl ayed i n these base maps. 

Finally, certain objects in the map (flood-prone areas, waterways, green 
spaces, landmark buildings, districts) are interactive. For instance, when 
users click on or hover above one of these objects with the mouse, a pop- up 
appears to indicate what it corresponds to. 

4.2.2. Technical characteristics 

This application uses three Application Programming Interfaces (API) that 
correspond to J avaScript libraries providing a wide range of interactive 
functionalities. 

The Polymaps API, developed in HTML5 - CSS3, has been chosen for its 
simplicity and rapidity of implementation within a website, and also for its 
compatibility with all browsers. As it implements the SVG format, a high 
level of interactivity can be generated between the various map items. Besi- 
des, the object styles can be directly defined in CSS format, which greatly 
si mpl i f i es the devel opment. 

Similarly, the Leaflet API, developed in HTML5 - CSS3, has the advantage 
of offering quick and simple incorporation within a website. Furthermore, 
its basic installation is very light and can be added on to as and when requi- 
red by installing additional plug-ins. 

These two APIs have another advantage, namely that of using the GeoJ SON 
format for geographic data, a simple text file composed of data in tabular 
form. This format simplifies the website structure and enables smoother 
navigation between websites. These two API s also make it easier to incorpo- 
rate personalized base maps, which is what we have done via the Cloud- 
made website and its online application known as Style Editor. 

Finally, we have chosen to usetheGeoportail API developed by the National 
Institute of Geographic and Forest Information (IGN), mainly because it 
allows us to enrich our own data with reference IGN geographic data (aerial 
photographs, topographic base maps, administrative boundaries). An ex- 
tensive body of I iterature has faci I itated its i implementation. 

Each of these three APIs has its own advantages and limitations, which will 
not be detai I ed i n the present paper. 



4.3. Geohistorical application: temporal interactive map 

4.3.1 . Conceptual characteristics 

The starting data correspond to geolocated points, each of which is associa- 
ted with one or more archived documents (pictures, photos) relating to an 
event that occurred between 1587 and 2011 

When the application is opened, a base map of the OpenStreetM ap kind 
appears at the scale of the city. This is accompanied by a timeline (Figu- 
re 6). 
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Figure 6. Map with timeline (Lieghio 2012, © City of Saint-Etienne, ISTHME, 
OpenStreetM ap). 

Users may navigate within this map (move around, zoom in or out) and 
choose to only display events of the same type by means of a clickable le- 
gend. The years may be scrolled through manually on the timeline. The 
map then automatically changes to show only the points relating to events 
that occurred in the past five years activated in the timeline. All points are 
present on the timeline, positioned according to date and defined by 
address. What this means is that there are two ways of gaining access to ar- 
chived documents related to a particular point: either via the map (by cli- 
cking on its sign) or via the timeline (by clicking on its address). In both 
cases, a pop- up appears, from which the relevant multimedia objects may 
be accessed. 



4.3.2. Technical characteristics 

The application is built using the J avaScript Timemap library. It allows us 
to synchronize the J avaScript Timeline library with online maps such as 
those from Google, Bing or OpenStreetM ap (the last of these being our 
choice). 



5. Conclusion 

Today, many interactive map applications are being used by members of 
the public, based on the Google Maps or OpenStreetM ap model. Given this 
context, one of the challenges faced by researchers in cartography is to 
think up new solutions for making such maps easier to use, understand and 
memorize. Most notably, consideration should be given to the data to dis- 
play depending on the scale involved, their graphic semiology, interactive 
and multimedia options, contextual menu and explanatory environment, as 
well as their access within a more global website. 

The three map applications described in this paper are a first step in this 
direction. They should not be viewed as finished, turnkey solutions for local 
authorities, but rather as experimental models that express our research 
thoughts on interactive mapping adapted to members of the public. 

As in the case of the City's interactive Dl CRI M , feedback will be gathered 
for these three maps in order to identify the features that should be retained 
as wel I as those that need i mprovement. Our obj ecti ve over the I onger term 
is to issue a set of preliminary recommendations for designing interactive 
maps in DICRIMs. 

Another avenue for future research is to develop an interactive- map Dl- 
CRI M in the form of a mobile application for use in smartphones, possibly 
coupled with a city- wide experi ment and feedback on its use. 
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